import React from 'react'
import { NavLink, withRouter} from 'react-router-dom'
import styled from 'styled-components'

//导航区域的样式
const NavBox = styled.nav`
    a{
        margin-right: 10px;
        color: #000;
        &.active{
            color: red;
        }
    }
`
class HomeHead extends React.Component {
    render() {
        // console.log(this.props);
        return <NavBox>
            <NavLink to="/a">A</NavLink>
            <NavLink to="/b">B</NavLink>
            <NavLink to="/c">C</NavLink>
        </NavBox>
    }
}

/* function Home(Component) {

    return function A(){
        let history = useHistory(),
            location = useLocation(),
            math = useRouteMatch()
        return <Component history={history} location={location} math={math} />
    }
} */
export default withRouter(HomeHead);

/* function HomeHead() {
    let history = useHistory(),
        location = useLocation(),
        math = useRouteMatch()
    return <NavBox>
        <Link to="/a">A</Link>
        <Link to="/b">B</Link>
        <Link to="/c">C</Link>
    </NavBox>
}
export default HomeHead */